Design guidelines · v1

Metric Media page system

Everything needed to build another page that matches the homepage and About page: palette, type, section rhythm, components, motion. Sharp corners throughout — no border radius anywhere.

01 · Palette

Six colours, fixed roles

Never introduce a new hue. Orange is for action and accent only — it never fills a large area. Amber is orange's counterpart on dark backgrounds.

#0d4c54Teal — primary surface, headings
#ff6b35Orange — CTAs, rules, hover
#b5502aRust — eyebrow labels on light
#f0a03cAmber — accent on dark only
#f7fafaMist — alternating band
#080808Ink — one dark band per page
#10393eBody text, strongest #3f5f64Body text, secondary rgba(13,76,84,.14)Every hairline border on light rgba(255,255,255,.13)Every hairline border on dark
02 · Type

Three faces, one job each

Open Sans 800 Headlines only H1–H3. Always letter-spacing:-.02em to -.035em, line-height .98–1.25.
Chivo 400/500 Body copy and nav links Paragraphs 16–19px, line-height 1.6–1.7, always text-wrap:pretty.
JetBrains Mono 600/700 Labels, buttons, stats 10–12px, uppercase, letter-spacing .13em–.18em. Never for sentences.
Fluid scale — copy these clamps
Page H1
clamp(40px,6.6vw,84px) Section H2
clamp(26px,3.4vw,46px) Card H3
20px / 800 Lead paragraph
clamp(17px,1.5vw,21px) Body
16–17px Stat figure
clamp(38px,4.6vw,58px)
03 · Layout & rhythm

Bands of full-bleed colour, content on a 1320px spine

Container

Section: padding:clamp(64px,8vw,120px) clamp(20px,5vw,80px). Inner: max-width:1320px;margin:0 auto.

Band order

Alternate #ffffff and #f7fafa, each separated by a 1px hairline. Exactly one #080808 band per page, plus the teal hero and teal contact/footer.

Grids

Always repeat(auto-fit,minmax(min(100%,280px),1fr)) with gap:clamp(18px,2.2vw,28px). Never fixed column counts, never media queries for cards.

Section head

Eyebrow (mono, rust, leading 30×2px orange dash) → H2 → optional 1-paragraph deck, capped at 760px. Nothing else above the content.
Page skeleton Top bar → sticky nav (transparent over hero, solid on scroll) → hero with margin-top:-84px → trust strip → 3–5 content bands alternating white/mist → one dark band → social proof → teal contact block → footer.
04 · Components

Reuse these five, don't invent a sixth

Buttons — 18px 28px, mono 11.5px, uppercase
01

Numbered reason card

Ghost numeral behind, mono index, hover lifts 5px and the border turns orange. Use for argument lists of 3–4.

Category card

Tinted gradient, teal top edge. For lists of markets, services or audiences.

Dark CTA card. Ends every card row that needs an action — one per row, always last.

Contact us
Testimonial card. Quote verbatim, never trimmed or paraphrased.
Full name Title, Company
01

Dark value card

Outlined stroke numeral, orange top rule, subtle white gradient fill. Only on the single dark band.

05 · Motion, content & rules

The short list to check before shipping

Motion

Reveal on scroll: 26px rise, .7s. Hover: translateY(-5px) + shadow, .35s. Hero gradient drift: 34s loop, barely visible. Nothing faster than .25s, nothing that moves layout.

Shadows & edges

Corners always square. Accents are 2–3px top or left rules, never outlines. Shadows only on hover or floating panels: 0 22px 44px -20px rgba(13,76,84,.45).

Copy

Client-supplied text stays verbatim. No invented statistics, dates or client names — only figures traceable to the live site. Headlines sentence case, labels uppercase.

Chrome

Copy the nav, mega menus, contact block and footer from the About page unchanged. Nav collapses to a hamburger below 1140px; hero must sit under it with margin-top:-84px.

Imagery

Photos are full-bleed inside their card with a teal-to-transparent gradient scrim. No illustration, no icon sets, no emoji. Missing photos become drop-in placeholders or initials monograms.

Mobile

Everything is fluid, no breakpoints for content. Tap targets 44px minimum. Body text never below 16px. Card rows become single column via min(100%,…).
Reference page: About → Reference page: Homepage